<!-- 素材上传页 -->
<template>
	<view class="pageBg">
		<custom-navbar title="素材" :showSearch="false"></custom-navbar>
		<view class="top" @click="GoUploadPage">
			<uv-image src="https://z-mytest.oss-cn-beijing.aliyuncs.com/creative/summer.gif" mode="widthFix" showLoading
				radius="10" width="100%">
				<template v-slot:loading>
					<uv-loading-icon color="red"></uv-loading-icon>
				</template>
			</uv-image>
			<uni-icons class="icon-upload" type="upload" size="60"></uni-icons>
			<text class="upload-text">点击上传素材</text>
		</view>
		<view class="body">
			<common-title>
				<template #name>
					素材推荐
				</template>
				<template #custom>
					<navigator url="/pages/classify/classify" class="more" open-type="switchTab">
						查看更多
					</navigator>
				</template>
			</common-title>
			<view class="content">
				<view class="swiper-wrapper">
					<uv-swiper :list="thumbnailUrl" previousMargin="30" nextMargin="30" circular autoplay vertical
						radius="5" bgColor="#ffffff" width="100%" height="95%" keyName="thumbnailUrl" showTitle
						:title-style="{color:'white',textAlign: 'center'}" display-multiple-items='0'
						@click="onPreview"></uv-swiper>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue"
	import {
		onLoad,
		onReady,
		onPageScroll,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"

	import {
		getMaterialRecommendationList
	}
	from "@/api/page.js"

	const materialList = ref([])
	// 缩略图集合
	const thumbnailUrl = computed(() => {
		// 使用map方法遍历materialList中的每个元素，返回一个新的数组
		return materialList.value.map(({
			thumbnailUrl,
			materialTitle
		}) => ({
			thumbnailUrl,
			title: materialTitle,
		}))
	})


	onReady(() => {})

	onShow(() => {
		// 获取推荐素材
		getRecommendationList()
	})

	const getRecommendationList = async () => {
		await getMaterialRecommendationList().then((res) => {
			if (res.code === 200) {
				// 
				materialList.value = res.data
			}
			if (res.code != 200) {
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				})
			}
		})
	}

	// 点击预览
	const onPreview = (index) => {
		if (index == null || index == "" || index == undefined) {
			uni.showToast({
				title: '索引异常！',
				icon: 'none'
			})
		}
		// 获取对应的素材信息
		const data = materialList.value[index]

		// 传递素材信息
		uni.setStorageSync("materialInfo", JSON.stringify(data))
		// 这里可以添加跳转逻辑
		uni.navigateTo({
			url: '/pages/preview/preview'
		})
	}

	// 前往上传页面
	const GoUploadPage = () => {
		uni.navigateTo({
			url: '/pages/material/uploadMaterial'
		})
	}
</script>

<style lang="scss" scoped>
	.pageBg {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		/* 防止整体页面滚动 */
	}

	.top {
		margin: 10rpx 10rpx;
		border-radius: 10rpx;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		position: relative;
		overflow: hidden;

		.u-image {
			width: 100%;
			height: 200rpx;
			position: inherit;
		}

		.icon-upload {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			z-index: 10;
		}

		.upload-text {
			position: absolute;
			right: 30rpx;
			top: 150rpx;
			z-index: 10;
			color: white;
			font-size: 30rpx;
			font-weight: bold;
			transform: skewX(-10deg);
			letter-spacing: 4px;
			-webkit-box-reflect: below 2px linear-gradient(transparent 30%, rgba(0, 0, 0, 0.35));
		}

	}

	.body {
		flex: 1;
		margin: 10rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
			width: 100%;
			height: 100%;

			.swiper-wrapper {
				width: 100%;
				height: 100%;
				overflow: hidden;


			}
		}
	}
</style>